<template>
  <div class="my-home">
    <!-- 二级路由的出口 -->
    <div class="my-home-main">
      <router-view></router-view>
    </div>
    <!-- 底部的tabbar开始 -->
    <div class="my-home-tabbar">
      <van-tabbar
        v-model="active"
        route
        :active-color="icon.active"
        :inactive-color="icon.inactive"
      >
        <van-tabbar-item to="/home/movies">
          <span>电影</span>
          <template #icon="props">
            <svg
              t="1650453120978"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3600"
              width="16"
              height="16"
            >
              <path
                d="M908.036096 188.635238c73.681101 88.004301 115.638477 201.591296 115.638477 324.388045 0 281.409229-229.230182 510.629786-510.651187 510.629786-283.467674 0-512.697958-229.220557-512.697958-510.629786 0-283.455795 229.230182-512.676454 512.697958-512.676454 125.871923 0 239.463731 45.025485 328.495104 119.726797 65.494323 9.209754 96.194867-9.209754 115.638477-92.097536l66.517709 22.512742C999.11424 132.353434 960.226918 176.355533 908.036096 188.635238L908.036096 188.635238zM221.368832 393.296486c-64.47104 0-117.685146 53.211955-117.685146 119.726797 0 64.468275 53.214106 119.726797 117.685146 119.726797 66.517709 0 119.731814-55.258522 119.731814-119.726797C341.100646 446.508442 287.886541 393.296486 221.368832 393.296486L221.368832 393.296486zM513.023386 103.700787c-66.517709 0-119.731814 53.211955-119.731814 117.68023 0 66.514944 53.214106 119.726797 119.731814 119.726797 64.47104 0 119.731814-53.211955 119.731814-119.726797C632.7552 156.912742 577.494323 103.700787 513.023386 103.700787L513.023386 103.700787zM444.458906 513.023283c0 37.862298 30.700442 67.538227 68.564378 67.538227s67.541094-29.67593 67.541094-67.538227-29.677158-68.56151-67.541094-68.56151S444.458906 475.160986 444.458906 513.023283L444.458906 513.023283zM513.023386 682.892186c-66.517709 0-119.731814 54.235238-119.731814 119.726797 0 66.514944 53.214106 119.726797 119.731814 119.726797 64.47104 0 119.731814-53.211955 119.731814-119.726797C632.7552 737.127322 577.494323 682.892186 513.023386 682.892186L513.023386 682.892186zM682.899354 513.023283c0 64.468275 54.237491 119.726797 119.731814 119.726797 66.517709 0 119.731814-55.258522 119.731814-119.726797 0-66.514944-53.214106-119.726797-119.731814-119.726797C737.136845 393.296486 682.899354 446.508442 682.899354 513.023283z"
                p-id="3601"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/theaters">
          <span>影院</span>
          <template #icon="props">
            <svg
              t="1650452387788"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3433"
              width="16"
              height="16"
            >
              <path
                d="M821.333333 138.666667c64.8 0 117.333333 52.533333 117.333334 117.333333v149.333333a32 32 0 0 1-32 32 74.666667 74.666667 0 0 0 0 149.333334 32 32 0 0 1 32 32v149.333333c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V618.666667a32 32 0 0 1 32-32 74.666667 74.666667 0 0 0 0-149.333334 32 32 0 0 1-32-32V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666zM640 565.333333H384a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64z m0-170.666666H384a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64z"
                p-id="3434"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/videos">
          <span>小视频</span>
          <template #icon="props">
            <svg
              t="1651799766544"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1616"
              width="16"
              height="16"
            >
              <path
                d="M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333 0 172.864-93.461333 323.904-232.618666 405.333333H906.666667a32 32 0 0 1 0 64H512C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667z"
                fill="#131415"
                p-id="1617"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
              <path
                d="M448.384 326.037333l256.853333 152.533334c19.861333 11.797333 26.048 36.864 13.802667 56-3.498667 5.504-8.32 10.112-14.058667 13.44l-256.853333 150.058666c-19.946667 11.669333-45.930667 5.525333-58.026667-13.696a39.594667 39.594667 0 0 1-6.101333-21.12V360.704c0-22.485333 18.901333-40.704 42.24-40.704 7.808 0 15.488 2.090667 22.144 6.058667v-0.021334z"
                fill="#FFFFFF"
                p-id="1618"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/personal">
          <span>我的</span>
          <template #icon="props">
            <svg
              t="1650889798395"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2322"
              width="16"
              height="16"
            >
              <path
                d="M521.798086 543.293888c149.770748 0 271.746924-121.976177 271.746925-271.746925S671.568834 0 521.798086 0 250.051162 121.976177 250.051162 271.746924s121.976177 271.546963 271.746924 271.546964zM942.115993 775.248584c-19.396212-41.591877-46.990822-79.184534-81.983988-111.778168-70.386253-65.387229-164.567858-102.979887-258.14958-102.979887h-160.168717c-93.781683 0-187.763327 37.592658-258.14958 102.979887-34.993165 32.593634-62.587776 70.186292-81.983987 111.778168-20.396016 43.791447-30.793986 89.782464-30.793986 137.173209 0 61.587971 49.990236 111.578207 111.578207 111.578207h678.867409c61.587971 0 111.578207-49.990236 111.578208-111.578207-0.199961-47.390744-10.397969-93.581722-30.793986-137.173209z"
                fill="#2c2c2c"
                p-id="2323"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 底部的tabbar结束 -->
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data: function () {
    return {
      active: 0,
      icon: {
        active: "#e54847",
        inactive: "#535353",
      },
    };
  },
  name: "HomeView",
  components: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.my-home {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .my-home-main {
    flex: 1;
  }

  .my-home-tabbar {
    height: 0.5rem;
  }
}
</style>
